<template>
	<div class="order">
		<h1>预约信息</h1>
		<div class="order-box">
			<el-form ref="formline" label-width="100px" :rules="rules" :model="formline">
				<el-form-item label="预约电话" prop="phoneNum">
					<el-input v-model="formline.phoneNum" maxlength="11" max="20" suffix-icon="el-icon-edit"></el-input>
				</el-form-item>
				<el-form-item label="上传二维码" label-width="100px" prop="imagesData">
					<form class="banner_loade" enctype="multipart/form-data">
						<el-button class="upload" type="primary">
							上传
							<input class="file" type="file" name="file" @change="uploadImg($event)">
						</el-button>
						<div class="loade_img">
							<img class="img_auto" :src='formline.imagesData' alt="">
						</div>
					</form>
				</el-form-item>

				<el-form-item>
					<el-button @click="cancel">取消</el-button>
					<el-button type="primary" @click="saveInfo(formline)">保存</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'order',
		data() {
			return {
				formline: {
					phoneNum: '',
					imagesData: ''
				},
				rules: {
					phoneNum: [{
						required: true,
						message: '请输入预约电话',
						trigger: 'blur'
					}],
					imagesData: [{
						required: true,
						message: '请上传二维码',
						trigger: 'blur'
					}],
				}

			}
		},
		created() {
			this.api.get("/api/lookcompany/").then((res) => {
				if (res.code == 200) {
					console.log(res.data.qrcode)
					this.formline.imagesData = JSON.parse(res.data.qrcode)
					this.formline.phoneNum = res.data.phone
				}
			})
		},
		methods: {
			uploadImg(e) {
				console.log(e)
				let file = e.target.files[0]
				let param = new FormData()
				param.append('files', file, file.name)
				let config = {
					headers: {
						'Content-Type': 'multipart/form-data'
					}
				};
				console.log(file, param)
				this.api.post('/api/imgs/', param, config).then(res => {
					if (res.code == 200) {
						this.formline.imagesData = res.data
					}
				})
			},
			cancel() {
				this.phoneNum = '';
				this.imagesData = "";
			},
			saveInfo(formline) {
				this.$refs.formline.validate((valid) => {
					if (valid) {
						let param = {
							phone: this.formline.phoneNum,
							qrcode: this.formline.imagesData
						}
						this.api.post('/api/reservation', param).then(res => {
							this.formline.phoneNum = res.data.phone;
							this.formline.imagesData = res.data.qrcode;
							if (res.code == 200) {
								this.$message({
									type: 'success',
									message: '保存成功!'
								})
								setTimeout(() => {
									this.$router.go(-1)
								}, 2000)
							}
						})
					}
				})




			}

		},
	}
</script>

<style scoped>
	.order-box {
		width: 40%;
	}


	.file {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 35px;
		line-height: 35px;
		text-align: center;
		opacity: 0;
	}

	.el-button {
		width: 100px;
	}

	.loade_img {
		display: flex;
		justify-content: space-between;
		background: url('./../../../static/img/push.jpg')no-repeat;
		background-size: 80px 80px;
		width: 100%;
		height: 80px;
	}

	.loade_img img {
		width: 80px;
	}

	.img_auto {
		max-width: 100%;
		width: 100%;
		max-height: 100%;
		height: 100%;
		object-fit: cover;
	}


	.upload {
		position: relative;
		width: 80px;
		height: 35px;
	}
</style>
